<template>
  <div ref="chart" class="chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "rightOneLChart",
  props: {
    chartData: {
      type: Array,
      //   required: true,
      default: () => [],
    },
  },
  data() {
    return {
      regionTotal: 0,
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.renderChart();
        this.resizeListener();
      },
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.renderChart();
    this.resizeListener();
  },
  beforeDestroy() {
    // 页面销毁时 销毁图表
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },

  methods: {
    getMax(arr) {
      let maxNum = 0;
      let num = Math.max.apply(
        Math,
        arr.map((item) => {
          return item;
        })
      );
      if (!Number.isFinite(num)) {
        maxNum = -1;
      } else {
        maxNum = num;
      }
      return maxNum;
    },
    renderChart() {
      this.chart.clear();
      let maxNum = this.getMax(this.chartData?.map((x) => x.num));
      let maxArr = new Array(this.chartData.length).fill(maxNum * 1.1);
      const option = {
        grid: {
          top: "5%",
          left: "2px",
          right: "0",
          bottom: "0px",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          backgroundColor: "rgba(0,0,0,0.8)",
          borderWidth: 0,
          textStyle: {
            color: "white",
          },
        },
        xAxis: {
          show: false,
          type: "value",
          max: maxNum * 1.1,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: this.chartData?.map((x) => x.title),
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              color: "#fff",
              fontSize: 18,
              align: "left",
              verticalAlign: "bottom",
              padding: [0, 0, 8, 10],
              formatter: function (value, index) {
                return [
                  "{lg|" + (index + 1) + "}" + "{title|" + value + "} ",
                ].join("\n");
              },
              rich: {
                lg: {
                  backgroundColor: "#3b8fff",
                  color: "#fff",
                  align: "center",
                  width: 22,
                  height: 25,
                  fontSize: 16,
                },
              },
            },
            offset: 0,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              padding: [0, 80, 10, 0],
              verticalAlign: "bottom",
              align: "right",
              fontSize: 18,
              color: "#fff",
            },
            data: this.chartData?.map((x) => x.num),
          },
          {
            type: "category",
            inverse: true,
            show: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              align: "right",
              color: "#33d9a3",
              fontSize: 18,
              padding: [0, 10, 10, 0],
              verticalAlign: "bottom",
            },
            data: this.chartData?.map((x) => x.rate),
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: this.chartData?.map((x) => x.num),
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2467FE",
                },
                {
                  offset: 1,
                  color: "#28FCFE00",
                },
              ]),
            },
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%",
            data: maxArr,
            itemStyle: {
              color: "#bcdaff42",
              borderRadius: 5,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "insideLeft",
              distance: -42,
              padding: [0, 0, 20, 0],
              formatter: () => {
                return `{a|}`;
              },
              rich: {
                a: {
                  widht: 36,
                  height: 36,
                  // backgroundColor: {
                  //   image: chartIcon,
                  // },
                },
              },
            },
          },
        ],
      };

      option && this.chart.setOption(option);
    },
    resizeListener() {
      window.addEventListener("resize", () => {
        if (this.chart && this.chart.resize) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
